<template>
	<view>
		<view class="head-wrap">
			<view class="head-main u-flex-row u-flex-between u-flex-y-center">
				<image src="../../static/logo.png" mode="scaleToFill" style="width: 64rpx;height: 64rpx"></image>
				<view class="u-flex-row u-flex-y-center">
					<image src="../../static/lj.png" mode="scaleToFill" style="width: 40rpx;height: 40rpx"></image>
					<view class="addr-wrap ice-mr-20   u-flex-row u-flex-xy-center u-flex-center">
						<view class="addr-wrap-box  u-flex-row u-flex-xy-center">
							<text style="line-height: 46rpx" class=" theme-color font-24 u-line-1 bold">{{account}}</text>
						</view>
						
					</view>
					<view class="lang-box u-flex-row u-flex-middle">
						<view @click="showLang=!showLang" class=" u-flex-row u-flex-middle">
							<text class="font-22" style="margin-right: 6rpx;">{{$i18n.locale =='zh-Hans'?'CH':'EN'}}</text>
							<u-icon name="arrow-down-fill" color="#FFFFFF" size="6"></u-icon>
						</view>
						<view v-if="showLang" class="lang-items font-24">
							<view @click="changeLang('en')" class="u-flex-row u-flex-start u-flex-y-center ice-mb-10">
								<view class="ice-ml-10">English</view>
							</view>
							<view @click="changeLang('zh-Hans')" class="u-flex-row u-flex-start u-flex-y-center">
								<view class="ice-ml-10">简体中文</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50px;"></view>
	</view>
</template>

<script>
	export default {
		name:"ice-header",
		data() {
			return {
				showLang: false,
			};
		},
		props:{
			account:'',
		},
		methods: {
			changeLang(lang) {
				uni.setLocale(lang)
				this.$i18n.locale = lang;
				this.showLang = false;
			}
		}
	}
</script>

<style scoped>
	.lang-box {
		width: 80rpx;
		/* width: 35px;
		height: 35px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #dd0000; */
		font-weight: 500;
	}

	.lang-icon {
		width: 25px;
		height: 25px;
		border-radius: 50%;
	}
	
	.addr-wrap {
		width: 180rpx;
		height: 50rpx;
		background: linear-gradient(0deg, #E9135F, #116BE6);
		margin-left: 15rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
	.addr-wrap-box {
		width: 176rpx;
		height: 46rpx;
		background: #0D0D0D;
		
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin-top: -0.5px;
	}
	.lang-items {
		position: absolute;
		top: 45px;
		right: 20rpx;
		background-color: #fff;
		color: #333;
		border-radius: 10rpx;
		padding: 10rpx 10rpx;
		line-height: 1.5;
	}
</style>